<template>
  <div class="main-container">
    <n-card :key="key">
      <n-page-header :subtitle="userInfo.name+'的回忆录'">
        <n-carousel autoplay>
          <template
              v-for="(src, index) in carouselImg"
              :key="index"
          >
            <img
                class="carousel-img"
                :src="src"
            />
          </template>
        </n-carousel>
        <template #title>
          <a style="text-decoration: none; color: inherit">MEMORY LOG</a>
        </template>
        <template #avatar>
          <n-avatar
              round
              :src="userInfo.avatar"
          />
        </template>
      </n-page-header>
      <n-divider />
      <!--  {{allMemoryIds}}{{surfaceSetting.memoryChooseLifeResults}}{{surfaceSetting.memoryChooseTaskResults}}{{choose}}-->
      <!--  {{timestampToDateTime(choose.range[0])}}{{choose.range}}-->
      <!--  {{timestampToDateTime(choose.range[1])}}-->
      <!--  {{ choose }}{{ stageList.getStageSelectOptions(fieldTree.getFieldDataById(choose.chooseField)) }}-->
      <!--  {{ taskList.getTaskSelectOptions(stageList.getStageDataById(choose.chooseStage)) }}-->
      <n-grid
          x-gap="12"
          :cols="2"
      >
        <n-gi>
          时间范围选择<n-date-picker
            v-model:value="range"
            type="monthrange"
        />
        </n-gi>
        <n-gi>
          id选择：<n-select></n-select>
          <!--          <IdMultilSelect v-model="choose"></IdMultilSelect>-->
        </n-gi>
      </n-grid>
      <template v-if="showMemoryList.length !== 0">
        <template
            v-for="(data, index) in showMemoryList"
            :key="index"
        >
          <!--            {{index}}-{{data}}-->
          <n-card :title="data.taskName">
            <template #header-extra>
              <n-button
                  dashed
                  type="primary"
                  @click="handleSelect(data)"
              >
                编辑
              </n-button>
            </template>
            <MemoryItem :data="data"></MemoryItem>
          </n-card>
          <n-divider />
        </template>
      </template>
      <template v-else>
        <n-divider />
        <n-empty
            size="large"
            description="暂无回忆记录"
            class="empty"
        >
        </n-empty>
        <n-divider />
      </template>
      <n-space justify="end">
        <n-pagination
            v-model:page="page"
            :page-count="pageCount"
        />
      </n-space>
    </n-card>
      <TaskLogEditDrawer v-model="formData"></TaskLogEditDrawer>
  </div>
</template>
<script setup lang="ts">

import {NButton, useMessage} from "naive-ui";
import useUserStore from "@/store/modules/user";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import {UseConstsStore} from "@/store/modules/consts";
import {computed, inject, onMounted, reactive, ref, watch} from "vue";
import {TaskLogData, UserInfo} from "@/views/model/model";
import {baseAddress, getMemoryList, getUseInfo} from "@/api/url";
import {post, Response} from "@/api/http";
import MemoryItem from "@/views/memory/MemoryItem.vue";
import TaskLogEditDrawer from "@/views/taskoperation/tasklog/TaskLogEditDrawer.vue";
const key = ref(Date.now())
const formData = reactive({
  show:false,
  key:Date.now(),
  data:TaskLogData.getNewTaskLogData()
})

const message = useMessage();
const userStore = useUserStore()
const useSurfaceSetting = UseSurfaceSettingStore()
const useConsts = UseConstsStore()

const range = ref([Date.now(),Date.now()])

const userInfo = ref<UserInfo>(UserInfo.getNewUserInfo());
const carouselImg = ref<Array<string>>([])
const showMemoryList = ref<Array<TaskLogData>>([])

const getInfo = async ()=> {
  userInfo.value = await userStore.getUserInfo()
  if(userInfo.value.picList)
    carouselImg.value = userInfo.value.picList.map(pic=>baseAddress+"/images/"+pic)
  try {
    const data: Response = await post({
      url: getMemoryList,
      data:{startTime:range.value[0], endTime:range.value[1]},
      token:userStore.getToken()
    });
    showMemoryList.value = data.data.data
    console.log(showMemoryList.value)
  }catch(e) {
    message.error((e as Error).message)
  }finally {
  }
}
onMounted(getInfo)
watch(key,getInfo)

const page = ref(1);
const pageDieved = 3;
const pageCount = computed(() => {
  const num = showMemoryList.value.length;
  return Math.ceil(num / pageDieved);
});

watch(page, getInfo)
const options = ref([
  {
    label: "编辑",
    key: "edit",
  },
]);
const handleSelect = (data:TaskLogData)=>{
  console.log(data)
  formData.data = data
  formData.show = true
}
watch(formData,()=>{
  if(formData.key !== key.value){
    key.value = Date.now()
    formData.key = key.value;
  }
})


</script>

<style scoped>
.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
</style>